﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>卡门店铺流量对比分析图</title>
    <script src="../js/jquery.js" type="text/javascript"></script>
    <script src="../js/extTools.js" type="text/javascript"></script>

    <script type="text/javascript" src="../js/highcharts.js"></script>
    <script src="../js/modules/exporting.js" type="text/javascript"></script>
    <script src="../js/config.js" type="text/javascript"></script>
    <link href="../css/msgsty.css" rel="stylesheet" type="text/css" />
    <link href="../css/global.css" rel="stylesheet" type="text/css" />
    <script src="../My97DatePicker/WdatePicker.js" type="text/javascript"></script>
    <link href="../css/loaders.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery/jquery.iDialog.js" dialog-theme="default" type="text/javascript"></script>
    <script type="text/javascript">
        function GetCharDemo(datetype) {
            if ($("#bdate").val() == "") {
                alert("请选择日期！");
                return;
            }
            if ($.trim($("#shopid").text() == "")) {
                alert("请选择店铺！");
                return;
            }
            if ($("#select-shop").text().trim() == "") {
                alert("请选择店铺！");
                return;
            }
            $(".loader").show();
            $.ajax({
                url: url_path + "/MrjControler.aspx",
                type: "POST",
                data: { aciton: 'pos_shopsale_chart', shopid: $("#select-shop").text(), bdate: $("#bdate").val(), edate: $("#edate").val() },
                timeout: 0,
                dataType: "json",
                success: function (data) {
                    var chart;
                    chart = new Highcharts.Chart({
                        chart: {
                            renderTo: 'chart_demo',
                            defaultSeriesType: 'line',
                            marginRight: 130,
                            marginBottom: 25
                        },
                        title: {
                            text: '卡门店铺流量对比分析图',
                            x: -20 //center
                        },
                        subtitle: {
                            text: 'www.km.com',
                            x: -20
                        },
                        xAxis: data.timelist,
                        yAxis: {
                            title: false,
                            plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }]
                        },
                        credits: { enabled: false },
                        tooltip: {
                            formatter: function () {
                                return '<b>' + this.series.name + '</b><br/>' +
								this.x + ': ' + this.y + ' ';
                            }
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'top',
                            x: -10,
                            y: 100,
                            borderWidth: 0
                        },
                        series: data.series
                    });
                    var orderObj = data.datalist;
                    var html = "";
                    for (var i = 0; i < orderObj.length; i++) {
                        html += '<tr>'
                                    + '<td>' + (i + 1) + '</td>'
                                    + '<td>' + orderObj[i].shopname + '</td>'
                                    + '<td>' + orderObj[i].saleamount + '</td>'
                                    + '<td>' + orderObj[i].saleqty + '</td>'
                                    + '<td>' + orderObj[i].salecount + '</td>'
                                    + '<td>' + orderObj[i].kinqty + '</td>'
                                    + '<td>' + orderObj[i].zhl + '</td>'
                                    + '<td>' + orderObj[i].salekdj + '</td>'
                                    + '<td>' + orderObj[i].saleldv + '</td>'
                                    + '<td>' + orderObj[i].salejdj + '</td>'
                                    + '<td>' + orderObj[i].kddate + '</td>'
                                  + '</tr>'
                    }
                    $("#rptdata").html(html);
                    $(".loader").hide();
                },
                error: function () {
                    alert("通讯超时,请检查网络.");
                    $(".loader").hide();
                }
            });
        }
        function BtnOutExcel() {
            if ($("#bdate").val() == "") {
                alert("请选择日期！");
                return;
            }
            if ($.trim($("#shopid").text() == "")) {
                alert("请选择店铺！");
                return;
            }
            if ($("#select-shop").text().trim() == "") {
                alert("请选择店铺！");
                return;
            }
            $(".loader").show();
            $.ajax({
                url: url_path + "/MrjControler.aspx",
                type: "POST",
                data: { aciton: 'pos_shopsale_chart_outexcel', shopid: $("#select-shop").text(), bdate: $("#bdate").val(), edate: $("#edate").val(), mid: '3098' },
                timeout: 0,
                dataType: "json",
                success: function (data) {
                    //alert(JSON.stringify(data));
                    $(".loader").hide();
                    if (data.status == 1) {
                        outExcle(data.data);
                    }
                    else {
                        alert(data.msg);
                    }
                },
                error: function () {
                    alert("通讯超时,请检查网络.");
                    $(".loader").hide();
                }
            });
        }
        function loadCity(obj, LoadType, param) {
            $.post(url_path + "/MrjControler.aspx",
                    { aciton: 'get_city_list', LoadType: LoadType, Param: param },
             function (data) {
                 var list = JSON.parse(data);
                 console.log(list);
                 var _html = '<option value = "0">请选择</option>';
                 $.map(list.data, function (item) {
                     _html += ' <option value = "' + item.name + '">' + item.name + '</option> ';
                 });
                 $(obj).html(_html);
             });
        }
        function lodshoplist(val) {
            //加载门店
            $("#js_shop").html("加载数据中...")
            $.post(url_path + "/MrjControler.aspx",
                    { aciton: 'lodshoplist', shopname: val },
                     function (data) {
                         var msg = $.trim(data);
                         var html = '<table id="chkblist" class="slOption"><tbody>';
                         if (msg == "NO_DATA") {
                             html = "<tr><td>没有数据！</td></tr>"
                         } else {
                             var orderObj = JSON.parse(msg);
                             for (var i = 0; i < orderObj.length; i++) {
                                 //html += '<tr><td><input name = "chkSon" type="checkbox" value="' + orderObj[i].shopid + '">' +
                                 //'<label>' + orderObj[i].shopname + '</label></td></tr>';
                                 html += "<li><a href='#' sid='" + orderObj[i].shopid + "'>" + orderObj[i].shopname + "</a></li>";
                             }
                         }
                         $("#shoplist").html(html);
                         /*$(".select").each(function () {
                         var s = $(this);
                         //var z = parseInt(s.css("z-index"));
                         var z = 200002;
                         var dt = $(this).children("dt");
                         var dd = $(this).children("dd");

                         var _show = function () { dd.slideDown(200); dt.addClass("cur"); s.css("z-index", z + 1); };   //展开效果
                         var _hide = function () { dd.slideUp(200); dt.removeClass("cur"); s.css("z-index", z); };    //关闭效果
                         dt.click(function () { _show(); });
                         dd.find("a").click(function () { dt.html($(this).html()); $("#shopid").text($(this).attr('sid')); _hide(); });     //选择效果（如需要传值，可自定义参数，在此处返回对应的“value”值 ）
                         $("body").click(function (i) { !$(i.target).parents(".select").first().is(s) ? _hide() : ""; });
                         })*/
                         /*html += '</tbody></table>';
                         $("#js_shop").html(html);
                         $('#js_shop input[type="checkbox"]').each(function () {
                         $(this).click(function () {
                         var val = $('#business').val();
                         var chkVal = $(this).val();
                         if ($(this).attr('checked') == 'checked') {
                         $('#business').val(val + chkVal + ';');
                         }
                         else {
                         var result = val.replace(chkVal + ';', '');
                         $('#business').val(result);
                         }
                         })
                         });*/
                     });
        }
    </script>
    <style>
        .shoplist
        {
            width: 350px;
            display: none;
            border: 1px solid #ccd6de;
            position: absolute;
            z-index: 10001;
            padding: 5px;
            background-color: #ddd;
        }
        .loader
        {
            height: 120px;
            width: 120px;
            display: none;
            position: absolute;
            left: 45%;
            top: 40%;
            z-index: 20001;
            height: auto;
            transition: opacity .25s linear;
            opacity: 1;
            box-sizing: border-box;
            flex: 0 1 auto;
            flex-direction: column;
            flex-grow: 1;
            flex-shrink: 0;
            flex-basis: 25%;
            max-width: 25%;
            align-items: center;
            justify-content: center;
        }
        .input-group input
        {
            box-sizing: border-box;
            line-height: 30px;
            text-indent: 1em;
            background: #efeff0;
            border: 0;
            border-radius: 5px;
            color: #595757;
        }
        /* select */
        .select
        {
            position: relative;
            margin: 0 10px;
        }
        .select dt
        {
            text-indent: 1em;
            border-radius: 5px;
            height: 30px;
            display: inline-block;
            border: 1px solid #d2ccc4;
            background: #fcfcfb url(ico.gif) no-repeat 97px center;
            line-height: 30px;
            font-weight: bold;
            cursor: pointer;
            width: 180px;
            padding-right: 12px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            position: relative;
            z-index: 10;
        }
        .select dt:hover, .select dt.cur
        {
            border: 1px solid #409DFE;
            box-shadow: 0 0 3px #409DFE;
        }
        .select dd
        {
            position: absolute;
            left: 0;
            top: 33px;
            border-bottom: 1px solid #d2ccc4;
            background: #fff;
            display: none;
        }
        .select dd div
        {
            padding: 3px 12px;
        }
        .select dd ul
        {
            padding: 4px;
            width: 260px;
            max-height: 250px;
            overflow: auto;
        }
        .select dd ul li
        {
            border-bottom: 1px solid #efeff0;
        }
        .select dd ul li a
        {
            line-height: 28px;
            display: block;
            padding: 0 8px;
        }
        .select dd ul li a:hover
        {
            background: #f5f5f5;
        }
        .row-weeklist
        {
            padding: 8px;
        }
        .form-inline
        {
            position: relative;
        }
        .form-inline lable
        {
            float: left;
        }
        .btn-group
        {
            float: left;
            width: 500px;
        }
        .btn-primary
        {
            color: white;
            background-color: #0080ff;
        }
        .input-group-addon
        {
            color: White;
        }
        .panel
        {
            width;"100%";
            margin-bottom: 20px;
            margin-top: 20px;
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 4px;
            -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
            box-shadow: 0 1px 1px rgba(0,0,0,.05);
        }
        .panel-heading
        {
            padding: 10px 15px;
            border-bottom: 1px solid transparent;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }
    </style>
</head>
<body style="font-size: 14px; background-color: #1f558a;">
    <div>
        <div class="rptTitle" style="color: #fff;">
            <b>卡门店铺流量对比分析图</b>
        </div>
        <div class="param_div">
            <div class="input-group">
                <span class="input-group-addon">开始日期：</span>
                <input id="bdate" type="text" class="form-control" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" />
            </div>
            <div class="input-group">
                <span class="input-group-addon">结束日期：</span>
                <input id="edate" type="text" class="form-control" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" />
            </div>
            <div class="input-group">
                <span class="input-group-addon" style="line-height: 30px; float: left;">店铺：</span>
                <label id="shopid" style="display: none;">
                </label>
                <dl class="select">
                    <dt class="shopname">点击选择店铺</dt>
                    <dd style="display: none;">
                        <div>
                            <input id="txtshopname" type="text" style="width: 160px;" />
                            <input id="btnfindshop" type="button" value="查找" />
                        </div>
                        <ul id="shoplist">
                            <li><a href="#">店铺转业绩、流量、转换分析图</a></li>
                        </ul>
                    </dd>
                </dl>
            </div>
            <!--<div class="input-group">
                <span class="input-group-addon">店铺：</span>
                <input id="business" class="form-control" type="text" placeholder="点选选择店铺" />
                <div class="shoplist" runat="server" id="shoplist">
                    <div style="color: Gray;">
                        <span>提示：不选择店铺查询全部数据</span></div>
                    <div style="text-align: right; color: Blue; font-size: smaller;">
                        <span><a id="chkall" href="#">全选</a></span> <span><a id="chkclear" href="#">清除</a></span>
                        <span><a id="chkclose" href="#">关闭</a></span></div>
                    <div style="padding: 8px 10px;">
                        模糊查找：<input id="txtshopname" type="text" placeholder="输入店铺名称" />
                        <input id="Button4" type="button" value="查找" />
                    </div>
                    <div id="js_shop" style="overflow: auto; height: 300px; border: 1px solid #ccd6de;">
                        <input id="chkblist" class="slOption" type="checkbox" />
                    </div>
                </div>
            </div>-->
            <div class="input-group" style="width: 120px;">
                <input id="btnqurey" type="button" value="查询" class="btn btn-info btn-lg btn-animate-demo" />
            </div>
            <div class="input-group" style="width: 120px;">
                <input id="BtnOutExcel" type="button" value="导出Excel" class="btn btn-info btn-lg btn-animate-demo" />
            </div>
        </div>
        <div class="row-weeklist">
            <div class="form-inline">
                <div class="btn-group" id="data_type_bar">
                </div>
            </div>
        </div>
    </div>
    <div style="width: 98%; margin: 0 auto;">
        <div id="chart_demo" class="chart_demo">
        </div>
        <div id="chart_combo" class="chart_combo">
        </div>
        <div class="panel">
        <div style="padding:2px 20px;color:Red;">
            <span>提示说明：计算连带率不含配，其他含配</span>
        </div>
            <div class="panel-heading">
                <table id="mytab" class="tb" style="width: 100%;">
                    <thead>
                        <tr>
                            <th style="width: 50px;">
                                序号
                            </th>
                            <th style="width: 300px;">
                                店铺
                            </th>
                            <th style="width: 180px;">
                                销售金额（百元）
                            </th>
                            <th style="width: 80px;">
                                销售数量
                            </th>
                            <th style="width: 80px;">
                                销售单数
                            </th>
                            <th style="width: 80px;">
                                客流量
                            </th>
                            <th style="width: 100px;">
                                转换率(%)
                            </th>
                            <th style="width: 80px;">
                                客单价
                            </th>
                            <th style="width: 120px;">
                                连带率(不含配)
                            </th>
                            <th style="width: 80px;">
                                件单价
                            </th>
                             <th style="width: 120px;">
                                开店日期
                            </th>
                        </tr>
                    </thead>
                    <tbody id="rptdata">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="loader">
        <div class="loader-inner pacman">
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
        </div>
    </div>
    <div id="my-shop" style="display: none;">
        <div style="padding: 3px;">
            <label id="select-shop" style="display: none;"></label>
            已选择店铺：
            <textarea id="txt_shop" style="width: 750px;" rows="2"  ></textarea>
        </div>
        <div>
            <span>省份：</span><select id="BigAreaList" style="width:120px;">
               <option value = "0">请选择</option>
            </select>
            <span>城市：</span><select id="AreaList" style="width:120px;">
               <option value = "0">请选择</option>
            </select>
            店铺：<input id="txt_shopname" type="text" style="width: 160px;" placeholder="输入店铺名称" />
            <input id="btn_findshop" type="button" value="查找" />
            <input id="chkall" type="button" value="全选" />
            <input id="chkclear" type="button" value="清除" />
        </div>
        <div id="shop-list" style="position: relative; height: 350px; overflow: auto;">
        </div>
    </div>
    <script type="text/javascript">
        var datetype = 0;
        $(function () {
            $("#bdate").val(today() + " 08:00:00");
            $("#edate").val(today() + " 23:59:59");
            lodshoplist("");
            loadCity("#BigAreaList", 0, "");
            $("#BigAreaList").change(function () {
                loadCity("#AreaList", 1, $("#BigAreaList").val());
            });
            $(".select").click(function () {
                if ($("#select-shop").text().trim() == "") {
                    getshop("");
                }
                $.dialog({
                    lock: true,
                    fixed: true,
                    title: '选择店铺',
                    width: 800,
                    btn: {
                        ok: {
                            val: '确定',
                            type: 'blue',
                            click: function (btn) {
                                var shop = $("#select-shop").text();
                                var num = shop.split(',').length - 1;
                                $(".shopname").html("[已选择" + num + "家店铺]");
                                //return false;
                            }
                        },
                        cancle: {
                            val: '取消',
                            type: 'red'
                        }
                    },
                    content: document.getElementById("my-shop")
                });

            });
            $('#business').click(function () {
                lodshoplist($("#txtshopname").val());
                if ($('.shoplist').css('display') == "none") {
                    $('.shoplist').css('display', 'block');
                }
                else {
                    $('.shoplist').css('display', 'none');
                }
            });
            $('#btnfindshop').click(function () {
                lodshoplist($("#txtshopname").val());
            });
            $('#btn_findshop').click(function () {
                getshop($("#txt_shopname").val());
            });
            $('#chkclose').click(function () {
                $('.shoplist').hide();
            });
            $('#chkclear').click(function () {
                $('#shop-list input[type="checkbox"]').each(function () {
                    if ($(this).attr('checked') == true) {
                        $(this).click();
                    }
                });
                $('#select-shop').text('');
                $('#txt_shop').val('');
            });
            $('#chkall').click(function () {
                $('#select-shop').val("");
                var chkVal = "";
                var chkName = "";
                $('#shop-list input[type="checkbox"]').each(function () {
                    chkVal += $(this).val() + ',';
                    chkName += $(this).attr('name');
                    if ($(this).attr('checked') == false) {
                        $(this).click();
                    }
                });
                $('#txt_shop').val(chkName);
                $('#select-shop').text(chkVal);
            });
            $('#btnqurey').click(function () {
                GetCharDemo(datetype);
            });
            $('#BtnOutExcel').click(function () {
                BtnOutExcel();
            });
        });
        function getshop(val) {
            $.post(url_path + "/MrjControler.aspx",
                { aciton: 'lodshoplist', shopname: val, BigAreaname: $("#BigAreaList").val(), AreaName: $("#AreaList").val() },
                    function (data) {
                        var html = "";
                        var msg = $.trim(data);
                        if (msg == "NO_DATA") {
                            html = "<tr><td>没有数据！</td></tr>"
                        } else {
                            var orderObj = JSON.parse(msg);
                            for (var i = 0; i < orderObj.length; i++) {
                                html += '<div style ="float:left; width:240px;"><input type="checkbox" name="' + orderObj[i].shopname + '" value="' + orderObj[i].shopid + '">' +
                                '<label>' + orderObj[i].shopname + '</label></div>';
                            }
                        }
                        $("#shop-list").html(html);
                        //$('#select-shop').text("");
                        $('#shop-list input[type="checkbox"]').each(function () {
                            $(this).click(function () {
                                var val = $('#select-shop').text();
                                var val2 = $('#txt_shop').val();
                                var chkVal = $(this).val();
                                var chkName = $(this).attr('name');
                                if ($(this).attr('checked') == true) {
                                    $('#select-shop').text(val + chkVal + ',');
                                    $('#txt_shop').val(val2 + chkName + ',');
                                }
                                else {
                                    var result = val.replace(new RegExp(chkVal + ',', 'gm'), '');
                                    $('#select-shop').text(result);
                                    //$('#txt_shop').val(val2.replace(chkName + ',', ''));
                                    $('#txt_shop').val(val2.replace(new RegExp(chkName + ',', 'gm'), ''));
                                }
                            })
                        });
                    });
        }
        function switchDataType(ojd, type) {
            $('.btn-type').removeClass("btn-primary");
            $(ojd).addClass("btn-primary");
            datetype = type;
        }
        //保留2位小数
        function twoDecimal(x) {
            var f_x = parseFloat(x);
            if (isNaN(f_x)) {
                alert('错误的参数');
                return false;
            }
            var f_x = Math.round(x * 100) / 100;
            var s_x = f_x.toString();
            var pos_decimal = s_x.indexOf('.');
            if (pos_decimal < 0) {
                pos_decimal = s_x.length;
                s_x += '.';
            }
            while (s_x.length <= pos_decimal + 2) {
                s_x += '0';
            }
            return s_x;
        }
    </script>
</body>
</html>
